<template>
  <div class="message">
    <div class="ui very relaxed items list-container blog-list-container">
      <div class="item blog-item" v-for="item in msgArr">
        <div class="content">
          <div v-if="item.msg_id === 2">
            <img :src="item.msg_data.user.avatar" class="ui avatar image">
            {{ item.msg_data.user.nick }} 加入房间
          </div>
          <div v-else-if="item.msg_id === 3">
            <img :src="item.msg_data.user.avatar" class="ui avatar image">
            {{ item.msg_data.user.nick }}
            <br>
            <p>{{ item.msg_data.content }}</p>
          </div>
          <div v-else-if="item.msg_id === 4">
            <img :src="item.msg_data.user.avatar" class="ui avatar image">
            {{ item.msg_data.user.nick }} 离开房间
          </div>
        </div>
      </div>

    </div>
    <div>
      <textarea class="ui text" v-model="msg"></textarea>
      <p></p>
      <button class="ui green submit button small" v-on:click="sendMsg">发送</button>
    </div>
  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'message',
    data () {
      return {
        msg: ''
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => vm.getWs())
    },
    computed: {
      ...mapGetters(['user', 'unread', 'ws', 'msgArr'])
    },
    methods: {
      ...mapActions(['getWs']),
      sendMsg () {
        var msg = {
          'msg_id': 3,
          'msg_data': {
            'content': this.msg,
            'user': this.$store.state.user
          }
        }
        this.ws.send(JSON.stringify(msg))
        this.$store.commit('pushMsg', msg)
      }
    }
  }
</script>

<style scoped>
  .message {
    position: fixed;
    text-align: left;
    margin: 0 auto;
    width: 1040px;
    padding: 10px 60px;
  }
  ul {
    list-style-type: none;
  }
  p {
    word-break: break-all;
    word-wrap: break-word;
  }
  .blog-list-container {
    height: 90%;
  }

</style>
